<template>
    <div class="Singer" ref="Singer">
        <van-collapse v-model="activeName" accordion>
            <van-collapse-item
                v-for="(item, index) in SingerData"
                :key="index"
                :name="item.name"
            >
                <template #title>
                    <HomeTitle
                        :left_text="item.left_text"
                        :right_show="false"
                    />
                </template>
                <!-- 歌手列表 -->
                <div class="SingerList">
                    <!-- 列表元素 -->
                    <SingerListItem
                        v-for="(v, i) in item.areaAllData.areaData"
                        :key="i"
                        :v="v"
                        @go="goSingerDetails(v.id)"
                    />

                    <!-- 懒加载开关 -->
                    <div class="lazy" :name="index"></div>
                </div>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>

<script>
import HomeTitle from '../../components/HomeTitle.vue'
import SingerListItem from '../../components/SingerListItem.vue'
export default {
    name: "Singer",
    components: { HomeTitle, SingerListItem },
    data() {
        return {
            activeName: '1',

            //  标签生成
            SingerData: [
                {
                    name: '1',
                    left_text: '华语',
                    areaAllData: {
                        // 参数
                        area: 7,
                        // 显示的数据
                        areaData: [
                            // {
                            //     id: null,//歌手id
                            //     name: null,//歌手名字
                            //     picUrl: null,//封面路径
                            //     alias: null,//别名
                            //     fansCount: null,//粉丝数量
                            //     musicSize: null,//歌曲数量
                            //     albumSize: null,//人气专辑数量
                            // }
                        ],
                        // 缓加载的数据
                        areaData_reserve: [],
                    }
                },
                { name: '2', left_text: '欧美', areaAllData: { area: 96, areaData: [], areaData_reserve: [], } },
                { name: '3', left_text: '日本', areaAllData: { area: 8, areaData: [], areaData_reserve: [], } },
                { name: '4', left_text: '韩国', areaAllData: { area: 16, areaData: [], areaData_reserve: [], } },
                { name: '5', left_text: '其他', areaAllData: { area: 0, areaData: [], areaData_reserve: [], } },
            ],

            // Singer节点
            domSinger: null,
            // 懒加载定时器
            timer: null,
        };
    },
    methods: {
        // 获取歌手数据
        getSingerData(i) {
            this.axios({
                method: "GET",
                url: "/artist/list",
                params: {
                    type: -1,
                    // 7华语 96欧美 8日本 16韩国 0其他
                    area: this.SingerData[i].areaAllData.area,
                    initial: -1
                }
            }).then((result) => {
                // console.log("🚀 ==> getSingerData ==> result", result);
                if (result.data.code === 200) {
                    result.data.artists.forEach((v) => {
                        // 别名合体
                        let alias = "";
                        if (v.alias.length > 0) { v.alias.forEach((v) => { alias += v + ' / ' }) }
                        if (v.trans) { alias += v.trans + ' / '; }
                        // 清除末尾 " / "
                        if (alias) { alias = alias.slice(0, -3); }


                        if (this.SingerData[i].areaAllData.areaData.length < 5) {

                            this.SingerData[i].areaAllData.areaData.push({
                                id: v.id,//歌手id
                                name: v.name,//歌手名字
                                picUrl: v.picUrl + '?param=140y140',//封面路径
                                alias,//别名                      
                                fansCount: v.fansCount,//粉丝数量
                                musicSize: v.musicSize,//歌曲数量
                                albumSize: v.albumSize,//人气专辑数量
                            });
                        } else {
                            this.SingerData[i].areaAllData.areaData_reserve.push({
                                id: v.id,//歌手id
                                name: v.name,//歌手名字
                                picUrl: v.picUrl,//封面路径
                                alias,//别名
                                fansCount: v.fansCount,//粉丝数量
                                musicSize: v.musicSize,//歌曲数量
                                albumSize: v.albumSize,//人气专辑数量
                            });
                        }
                    });
                    // console.log("🚀 ==> result.data.artists.forEach ==> this.SingerData[i]", this.SingerData[i]);

                    // 函数递归 请求数据
                    if (i > 0) { this.getSingerData(i - 1); }
                    else { return }
                }
            }).catch((err) => {
                console.log("🚀 ==> getSingerData ==> err", err);
            });
        },

        // 新元素生成
        generate(index) {
            if (this.SingerData[index].areaAllData.areaData_reserve.length !== 0) {
                console.log("🚀 ==> generate ==> 新元素生成!");
                this.SingerData[index].areaAllData.areaData.push(...this.SingerData[index].areaAllData.areaData_reserve.splice(0, 5));
            }
        },

        // 懒加载
        scroll() {

            // 触发缓加载 的 标签节点
            let lazy = document.getElementsByName(this.activeName - 1)[0];
            // console.log("🚀 ==> scroll ==> this.activeName", this.activeName);
            // console.log("🚀 ==> scroll ==> lazy ", lazy);


            // 缓加载的数据 长度
            let dataL = this.SingerData[this.activeName - 1].areaAllData.areaData_reserve.length;
            // 没数据了 停止执行代码块
            if (dataL === 0) { return }


            // 获取的是浏览器可见区域高度（网页的可视区域的高度）（不滚动的情况下）
            let documentClientHeight = document.documentElement.clientHeight || window.innerHeight;
            // 指定元素顶端到可见区域（网页）顶端的距离
            let htmlElementClientTop = lazy.getBoundingClientRect().top;


            // 指定元素进入可视区域
            if (documentClientHeight - 100 >= htmlElementClientTop) {
                // console.log(htmlElementClientTop);

                // 判断定时器是否存在 ==> null==false , 存在==true
                if (this.timer) {
                    // 是, 就夹断, 不再往下执行 
                    return
                }

                // [定时器存在, 不往下执行;] [执行完情况序号号后,定时器就不存在了, 就将往下执行代码;]
                // 建立一次性定时器
                this.timer = setTimeout(() => {
                    this.generate(this.activeName - 1);
                    //执行结束, 清空定时器序号, 以便进行下次触发执行;
                    this.timer = null;
                }, 800);
            }
        },

        // 跳转到歌手详情路由
        goSingerDetails(id) {
            this.$router.push({ name: 'SingerDetails', params: { id } });
        }
    },

    filters: {
        // 千分位
        playCount_kw: (value) => {
            let b = String(value).split("");
            let c = b.length;
            for (let i = c - 3; i > 0; i -= 3) { b.splice(i, 0, ","); }
            return b.join("");
        }
    },
    created() {
        // 递归请求数据
        this.getSingerData(4);

        this.$nextTick(() => {
            //获取歌手节点 
            this.domSinger = this.$refs.Singer;
            // console.log(this.domSinger);

            let vuethis = this;
            // 监听 歌手节点页面 滚动事件
            this.domSinger.onscroll = function () { vuethis.scroll(); };
        })
    },
}
</script>

<style lang="less" scoped>
.Singer {
    margin: 0 18px 0;
    padding-top: 20px;
    padding-bottom: 10px;
    max-height: 525px;
    overflow: scroll;
    
    [class*='van-hairline']::after {
        border: none;
    }
    .van-collapse-item--border::after {
        border: none;
    }

    /deep/.van-cell {
        background-color: #000;
        padding: 10px 0;
        &::after {
            border: none;
        }
        .van-icon {
            font-weight: 600;
            font-size: 20px;
            color: #fb9413;
        }
        .title_box {
            padding: 0;
            margin: 0;
            .title {
                color: rgba(255, 255, 255, 0.95);
                letter-spacing: 8px;
            }
        }
    }

    /deep/ .van-collapse-item__content {
        padding: 0;

        // 歌手列表
        .SingerList {
            background-color: #000;
            padding-top: 8px;
            font-size: 12px;
            line-height: 12px;
        }
    }
}
</style>